// 商户服务
<template>
  <div class="CustomerService">
    <nav-login></nav-login>
    <home-seach></home-seach>
    <goods-nav :navindex="navindex"></goods-nav>
    <div class="w1920" :style="{ background: `url(${serverBanner}) 50% 0px no-repeat`}">
      <div class="w1200">
        <h1>合作商户</h1>
        <p>cooperation and Investment</p>
        <div :style="{ background: `url(${serverBG}) 50% 0px no-repeat`}">
          <p class="title-change">孚地卖场,如何帮扶积<b>压库存企业</b>起死回生?</p>
          <span>孚地卖场作为库存工业品集散平台，</span>
          <span>突破工业领域库存重、成本高等行业桎梏，</span>
          <span>借势“互联网+”开创工业品电商新模式，</span>
          <span>为制造企业提供“降本创收”解决方案，</span>
          <span>助力企业盘活企业资产，迅速回笼资金，</span>
          <span>实现企业利润最大化。</span>
          <!-- <i>咨询加入</i> -->
        </div>
      </div>
    </div>
    <div class="ww1200">     
      <div class="fdmczy">
        <h1>孚地卖场，</h1>
        <h3>让库存“活”起来！</h3>
      </div> 
      <div class="step">
        <div class="line"></div>
        <div class="step--content">
          <span>1</span>
          <span>2</span>
        </div>
      </div>
      <div class="stepText">
        <div class="stepText--content">
          <h3>清库存</h3>
          <p>变“闲”为现，为供方降本</p>
        </div>
        <div class="stepText--content">
          <h3>减积压</h3>
          <p>化“废”生宝，助供方创利</p>
        </div>
      </div>
      <div class="wan">100万呆滞库存意味着... ...</div>
      <ul class="sanfen">

        <li>
          <h5>占用资金成本：</h5> 
          <p>100万* ~10%(年化资金成本)= <b>~10万/年</b></p>
        </li>

        <li>
          <h5>经营收益损失：</h5> 
          <p>100万* ~3次(年资金周转次数)*10%（利润率=<b>~30万/年</b></p>
        </li>

        <li>
          <h5>资产成本损失：</h5> 
          <p>100万*( ~20%（库存品贬值）+ ~5%(管理费率)= <b>~25万/年</b></p>
        </li>
        
      </ul>
      <div class="daizhi">
        呆滞库存正在吞噬你的利润，让你一年 <b> “白忙”… …</b> 
      </div>
      <ul class="sanText">
        <li>孚地卖场聚焦采购降本，</li>
        <li>削减库存快速变现，</li>
        <li>为制造企业提供降本创收解决方案！</li>
      </ul>
      <div class="ContactInformation">
        <img v-lazyload="icon5" src="@/assets/logo/loading.png">
        <!-- <img :src="c"> -->
        客服热线：{{this.$store.state.contact_info.complaint_call}}
        <img v-lazyload="icon4" src="@/assets/logo/loading.png">
        <!-- <img :src="icon4"> -->
        客服邮箱：{{this.$store.state.contact_info.email}}
      </div>
    </div>
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
  </div>
</template>

<script>
import serverBanner from "@/assets/images/serverBanner.png"
import serverBG from "@/assets/images/serverBG.png"

import pic01 from "@/assets/customerServiceIcon/pic01.png"
import pic02 from "@/assets/customerServiceIcon/pic02.png"
import icon4 from "@/assets/customerServiceIcon/icon4.png"
import icon5 from "@/assets/customerServiceIcon/icon5.png"

export default {
  name: "MerchantServices",
  data() {
    return {
      navindex: -1,
      serverBanner,
      serverBG,
      icon4,
      icon5,
      pic01,
      pic02
    }
  }
}
</script>
<style lang="scss" scoped>
.CustomerService {
  .w1920 {
    width: 100%;
    height: 300px;
    margin-bottom: 277px;
    .w1200 {
      width: 1200px;
      margin: auto;
      position: relative;
      h1 {
        color: #f8f8f8;
        text-align: center;
        padding-top: 74px;
        letter-spacing: 3px;
      }
      p {
        color: #aaa;
        font-size: 12px;
        text-align: center;
      }
      div {
        width: 1200px;
        height: 365px;
        background: #aaa;
        position: absolute;
        top: 184px;
        .title-change {
          text-align: start;
          padding-left: 74px;
          font-size: 29px;
          color: #141414;
          padding-top: 62px;
          letter-spacing: 5px;
          margin-bottom: 30px;
        }
        span {
          display: block;
          padding-left: 74px;
          font-size: 18px;
          color: #313131;
        }
        i {
          margin-left: 74px;
          margin-top: 18px;
          display: block;
          width: 120px;
          height: 36px;
          border: 2px solid #566467;
          line-height: 36px;
          font-size: 16px;
          color: #444;
          text-align: center;
          letter-spacing: 2px;
          font-weight: bold;
          cursor: pointer;
          &:hover {
            border-radius: 8px;
            transition: 0.2s;
            color: #566467;
          }
        }
      }
    }
  }
  .ww1200 {
    width: 1200px;
    margin: auto;
    .fdmczy{
      h1,h3{
        text-align: center;
      }
      h1{
        font-size: 69.74px;
      }
      h3{
        font-size: 50px;
        margin-bottom: 30px;
      }
    }
    .step{
      width: 100%;
      height: 60px;
      position: relative;
      .line{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 30px;
        border-bottom: 1px solid #dcdcdc; 
      }
      &--content{
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        span{
          position: relative;
          font-size: 18px;
          text-align: center;
          line-height: 38px;
          background-color: #acacac;
          width: 38px;
          height: 38px;
          border-radius: 50%;
          &::after{
            position: absolute;
            bottom: -15px;
            left: 9px;
            content: '';
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-top-color:  #acacac; 
          }
        }
      }
    }
    .stepText{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      &--content{
        padding-left: 80px;
        h3{
          margin-top: 10px;
          line-height: 36px;
          font-size: 26px;
          color: #4c4c4c;
          font-weight: 400;
        }
        p{
          font-size: 16px;
          color: #4c4c4c;
          line-height: 28px;
        }
      }
    }
    .wan{
      width:100%;
      height: 157px;
      line-height: 157px;
      font-size: 41.16px;
      text-align: center;
    }
    .sanfen{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      li{
        box-sizing: border-box;
        padding: 20px 36px; 
        width: 348px;
        height: 104px;
        border-radius: 10px;
        border: 1px dashed #cccccc;
        h5{
          font-size: 17px
        }
        p{
          font-size: 14px;
        }
      }
    }
    .daizhi{
      width: 100%;
      height: 104px;
      line-height: 104px;
      text-align: center;
      font-size: 22px;
      b{
        font-size: 28px;
      }
    }
    .sanText{
      margin: 60px 0px;
      li{
        color: #5b5b5b;
        font-size: 32px;
        text-align: center;
        &:nth-child(2n + 1){
          font-weight: 500;
        }
        &:nth-child(2n){
          font-weight: 300;
        }
      }
    }



    .ContactInformation {
      width: 100%;
      height: 51px;
      background: #f7f7f7;
      color: #313131;
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.5px;
      line-height: 35px;
      padding-top: 16px;
      img {
        padding: 0 8px;
      }
    }
  }
}
</style>


